<template>
    <div id="shop">
        <!-- 头部 -->
        <div class="header">
            <div class="headerBox">
                <div class="headerContent">
                    <img :src="apiUrl+'/'+shopImg" alt="">
                    <div class="headerTxt">
                        <h2>{{shopName}}</h2>
                        <p class="headerp">
                            <span>达达专送</span>
                            <span>.{{shopTime}}分钟</span>
                        </p>
                        <p class="headerp">基础运费4元</p>
                    </div>
                </div>
                    
                <div class="headerIco">
                    <i class="fa fa-heart-o"></i>
                </div>
            </div>
            <div class="yh">
                <el-collapse accordion>
                  <el-collapse-item name="1">
                     <template slot="title" class="yhTxt">
                      <i class="fq">返券</i>实付满50元订单完成后返20元 ... <span class="yhq"> 10种优惠</span>
                    </template>
                    <div class="yhcontents">
                      <h3>店铺优惠券</h3>
                      <ul class="yhlist">
                        <li>
                          <div class="yh1">
                            <div>8.8折</div>
                            <div>满30~40元享折扣</div>
                          </div>
                          <div>领券</div>
                        </li>
                      </ul>
                    </div>
                  </el-collapse-item>
                </el-collapse>
            </div>
            <div class="search">
                <div class="sframe">
                    <p>
                        <i class="fa fa-search"></i>&nbsp;&nbsp;
                        <span>搜索店内商品，共2138件好物</span>
                    </p>
                </div>
                <div class="simg"> 
                    <img src="/static/groupCopy.png" alt="">
                </div>
            </div>
        </div>
        <!-- 主体 -->
        <div class="main">
            <!-- 主体左边 -->
            <div class="left">
                <ul>
                    <li v-for="ctg in ctgs"  :key="ctg.id"  class="sort" >
                        <p @click="ctg.display=!ctg.display" class="ctgm">{{ctg.ctgName}}</p>  
                        <ul v-show="ctg.display"  class="sorts">
                            <li v-for="chctg in ctg.children" :key="chctg.id" @click="getMerchants(chctg.id)" class="chctgm">{{chctg.ctgname}}</li>
                        </ul>
                    </li>
                </ul>
            </div>
            <!-- 主体右边 -->
            <div class="right">
                <ul>
                    <li v-for="merchant in merchants" class="mBox" :key="merchant.id">  
                        <div class="mImg">
                            <img :src="apiUrl+'/'+merchant.mImg" alt="">
                        </div>
                        <div class="mTxt">
                            <h3>{{merchant.mName}}</h3>
                            <p class="mSale">
                                <span>月售{{merchant.store}}件</span>&nbsp;&nbsp;
                                <span>好评{{merchant.judge}}%</span>
                            </p>
                            <p class="myh">满30减5</p>
                            <div class="mPrice"> 
                                <div class="twoPrice">
                                  <p class="mPricep">￥{{merchant.price}}</p>
                                  <del class="">￥{{merchant.oprice}}</del>
                                </div>
                                <div v-if="merchant.snum>0" class="reducebj">
                                   <p  class="redCount" @click="reduceCar({shopid:shopid,merchInfo:merchant})">-</p>
                                  <p>{{merchant.snum}}</p>
                                </div> 
                                <p class="mCount" @click="addCar({shopid:shopid,merchInfo:merchant})">+</p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 脚部 -->
        <div>
          <Car :shopid="shopid"></Car>
        </div>
        <!-- 右侧导航 -->
        <rnav active="shop"></rnav>
    </div>
</template>
<script>
import Car from "@/components/Car.vue";
import rnav from "@/components/Rnav.vue";
import { mapState, mapMutations, mapGetters } from "vuex";
import store from "@/store/index.js";
export default {
  props: ["shopid", "shopImg", "shopName", "shopTime"],
  components: {
    Car,
    rnav,
  },
  store,
  data() {
    return {
      ctgs: [],
      merchants: []
    };
  },
  created() {
    this.initCar(this.shopid);
    this.getShopCtg();
    this.getMerchants();
  },
  computed: {
    ...mapState(["car"])
  },
  methods: {
    getShopCtg() {
      this.axios.get("/shops/list").then(res => {
        if (res.data.error == 0) {
          this.ctgs = res.data.data1;
          console.log(this.ctgs.id);
        }
      });
    },
    getMerchants() {
      this.axios.get("/merchant/list").then(res => {
        if (res.data.error == 0) {
          this.merchants = res.data.data2;
          console.log(res.data.data2);
        }
      });
    },
    ...mapMutations(["initCar", "addCar", "reduceCar"])
  }
};
</script>
<style>
*{
  box-sizing: border-box;
}
.yhcontents{
  height: auto;
  position: fixed;
  top:8rem;
  bottom:0;
  z-index: 300;
  background: white;
  overflow-y: auto;
}
.yhcontents h3{
  width:20rem;
  height: auto;
}
.yhlist{
  width:19rem;
  /* height: auto; */
  /* border:1px solid red; */
}
.yhlist li{
  margin-bottom: 1rem;
}
.yh1{
  border:1px solid red;
  border-left: 0.3rem solid red;
}
ul {
  list-style-type: none;
}

/*头部样式*/
.header {
  height: 10.8rem;
  width: 100%;
}
.headerBox {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.headerContent {
  display: flex;
  justify-content: space-between;
}
.headerBox img {
  width: 3.875rem;
  height: 3.875rem;
  border: 0.0625rem solid #ddd;
  background-color: white;
  border-radius: 1.5rem 0 1.5rem 0;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.headerTxt {
  line-height: 1.5rem;
  margin-left: 0.5rem;
}
.headerTxt h2 {
  font-size: 1rem;
  font-weight: 900;
}
.headerp {
  font-size: 0.75rem;
}
.headerIco {
  font-size: 1.5rem;
  margin-right: 1rem;
}
.yh {
  width: 100%;
  height: auto;
  font-size: 0.75rem;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
  margin: 0.3rem 0;
}
.fq {
  background-color: rgb(245, 134, 7);
  color: white;
}
.yhTxt {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 78%;
}
.yhq i {
  font-size: 1rem;
}
.search {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 0 0.5rem;
}
.sframe {
  width: 82%;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5rem;
  color: #999;
  font-size: 0.9rem;
}
.simg img {
  width: 2.9375rem;
  height: 1.875rem;
  margin-top: 0.2rem;
}
/*主体样式*/
.main {
  display: flex;
  height: 24rem;
}
.left {
  width: 5rem;
  height: 100%;
  overflow: auto;
}
.sort {
  width: 5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #666;
  background-color: #f8f8f8;
}
.sort p {
  width: 4rem;
  height: 3rem;
  line-height: 3rem;
  margin: 0 auto;
}
.sorts {
  padding-left: 1.3rem;
  list-style-type: disc;
}
.ctgm:hover {
  font-weight: 900;
  color: black;
}
sort:hover {
  background-color: white;
}
.chctgm:hover {
  color: rgb(82, 160, 4);
}
.sorts li {
  width: 3.5rem;
  font-size: 0.625rem;
  margin-bottom: 0.5rem;
}
.right {
  width: 15rem;
  height: 100%;
  overflow-y: auto;
}
.mBox {
  display: flex;
  height: 9.3rem;
  margin-top: 0.5rem;
}
.mImg {
  padding: 0 0.3rem;
}
.mImg img {
  width: 4.06rem;
  height: 4.06rem;
}
.mTxt {
  line-height: 2rem;
}
.mTxt h3 {
  font-size: 1rem;
  font-weight: 700;
}
.mSale {
  font-size: 0.75rem;
}
.myh {
  width: 3.5rem;
  padding-left: 0.3rem;
  line-height: 1rem;
  font-size: 0.75rem;
  background-color: #27be6b;
  border-radius: 0.3rem;
  color: white;
}
.mPrice {
  width: 9.8rem;
  display: flex;
  justify-content: space-between;
}
.mPrice del{
  font-size: 0.7rem;
  color:#999;
}
.mPricep {
  font-size: 1rem;
  color: red;
}
.twoPrice{
  line-height: 1.2rem;
}
.mCount {
  width: 1.75rem;
  height: 1.75rem;
  background-color: #00ca3e;
  border-radius: 1.75rem;
  color: white;
  line-height: 1.5rem;
  text-align: center;
  font-size: 1.6rem;
}
.redCount {
  width: 1.75rem;
  height: 1.75rem;
  border: 0.0625rem solid #00ca3e;
  border-radius: 1.75rem;
  color: #00ca3e;
  line-height: 1.5rem;
  text-align: center;
  font-size: 1.6rem;
}
.reducebj{
  display: flex;
  width:3rem;
  justify-content: space-between;
}
</style>


